<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>介绍</title>
	<link rel="stylesheet/less" type="text/css" href="less/main.less" />
	<!--<script src="js/main.js"  type="text/javascript"></script>-->
	<script src="less/less.min.js"></script>
</head>
<body>
<h2>颜色</h2>
	<fieldset>
		<legend>参考资料</legend>
		<h4>CSS预处理器--LESS、SASS</h4>
		<p>
			CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就 只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。 CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基 本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
		</p>
		<h4><a href="http://www.bootcss.com/p/lesscss/" target="_blank">http://www.bootcss.com/p/lesscss/</a></h4>
		<h4>其他人笔记：<a href="http://www.cnphp6.com/archives/62534" target="_blank">http://www.cnphp6.com/archives/62534</a></h4>
	</fieldset>

	<fieldset>
		<legend>less安装</legend>
		<h3>参考资料:http://www.it165.net/admin/html/201409/3668.html</h3>
		<h4>客户端</h4>
		<p>
			我们可以直接在客户端使用“.less”（LESS源文件），只需要在官网载一个javascript脚本文件主“less.js”，然后LESS源文件一定要在“less.js”引入之前引入，这样才能保证LESS源文件正确编译解析。问题是，经过测试使用客户端这样引用在IE6-9并不生效，也就是说并没有和网上说的一样能正确被解析css样式，所以我们不建议用客户端这样引用。
			ps:线上less.js， http://cdn.bootcss.com/less.js/1.7.0/less.min.js
		</p>
		<h4>服务器端使用nodeJS来对Less文件进行编译。</h4>
		<p>http://blog.jobbole.com/46099/</p>
		http://www.cnblogs.com/mrhgw/p/4535420.html
		http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/
		
	
	</fieldset>

	<fieldset>
		<legend>变量</legend>
		<pre>
		// LESS
		@color: #4D926F;
		#header {color: @color; }
		h2 {color: @color; }

		/* 生成的 CSS */
		#header {color: #4D926F; }
		h2 {color: #4D926F; }
		</pre>
	
	</fieldset>

	<fieldset>
		<legend>混合</legend>
		<p>混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。</p>
		<pre>
			// LESS
			.rounded-corners (@radius: 5px) {
			  border-radius: @radius;
			  -webkit-border-radius: @radius;
			  -moz-border-radius: @radius;
			}
			#header {color: #111; .rounded-corners; }
			#footer { .rounded-corners(10px); }

			/* 生成的 CSS */
			#header {
			  color: #111;
			  border-radius: 5px;
			  -webkit-border-radius: 5px;
			  -moz-border-radius: 5px;
			}
			#footer {
			  border-radius: 10px;
			  -webkit-border-radius: 10px;
			  -moz-border-radius: 10px;
			}

		</pre>
	</fieldset>

	<fieldset>
		<legend>嵌套规则</legend>
		<p>我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。</p>
		<pre>
		// LESS
		#header {
		  h1 {font-size: 26px; font-weight: bold; }
		  p { font-size: 12px;
		    a { text-decoration: none;
		      &:hover { border-width: 1px }
		    }
		  }
		}

		/* 生成的 CSS */

		#header h1 {font-size: 26px; font-weight: bold; }
		#header p {font-size: 12px; }
		#header p a {text-decoration: none; }
		#header p a:hover {border-width: 1px; }
		</pre>
	</fieldset>

	<fieldset>
		<legend>函数 & 运算</legend>
		<p>运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。</p>
		<pre>
			// LESS
			@the-border: 1px;
			@base-color: #111;
			@red:  #842210;

			#header {
			  color: @base-color * 3;
			  border-left: @the-border;
			  border-right: @the-border * 2;
			}
			#footer { 
			  color: @base-color + #003300;
			  border-color: desaturate(@red, 10%);
			}

			/* 生成的 CSS */
			#header {color: #333; border-left: 1px; border-right: 2px; }
			#footer {color: #114411; border-color: #7d2717; }
		</pre>
	</fieldset>

	<fieldset>
		<legend>监视模式</legend>
		<pre> 监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。
要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。
		</pre>
	</fieldset>
</body>
</html>